<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    canvas {
      /* background: black; */
    }
  </style>
</head>
<body>
  <!-- 
    https://www.javascriptcn.com/read-2334.html
    getImageData(x, y, width, height) 
    得到一个数组 
    每四个值代表一个像素点rgba
    分别为0-255的值
    

    根据得到的像素位置，然后去获取一个数组，数组中包含颜色 和基于像素本身位置的小的偏移

    根据获取到的所有像素的值
    每四个是一个像素值
    生成对应的颜色，以及将该像素点偏移
    得到这些颜色数据后，根据颜色进行绘图，得到对应的图形
   -->
  <canvas></canvas>
  <script>
    var canvas = document.querySelector('canvas')
    var ctx = canvas.getContext('2d')
    var img = new Image()

    var pixels = []
    var imageData = []
    img.src = './color.png'
    img.onload = function () {
      canvas.width = this.width + 10
      canvas.height = this.height + 10
      ctx.drawImage(this, 4, 4)

      imageData = ctx.getImageData(4, 4, this.width, this.height)
      console.log(imageData)
      getPixels()
      
      ctx.clearRect(0, 0, 10, 10)
      // pixels
      for (var i = 0; i < pixels.length; i++) {
        // 设置填充颜色
        console.log(pixels[i])
        ctx.fillStyle = pixels[i].fillStyle
        ctx.fillRect(pixels[i].x, pixels[i].y, 1, 1)
        // ctx.fillRect(0, 0, 10, 10)
      } 
      
    }


    function getPixels() {
      var pos = 0;
      var data = imageData.data; //RGBA的一维数组数据
      //源图像的高度和宽度为4px
      for (var i = 1; i <= 4; i++) {
        console.log("_____________________")
        console.log(i)
        for (var j = 1; j <= 4; j++) {
          pos = ((i - 1) * 4 + (j - 1)) * 4; //取得像素位置
          console.log(pos, i, j)
          if (data[pos] >= 0) {
            var pixel = {
              x: 4 + j + Math.random() * 2, //重新设置每个像素的位置信息
              y: 4 + i + Math.random() * 2, //重新设置每个像素的位置信息
              fillStyle: 'rgba(' + data[pos] + ',' + (data[pos + 1]) + ',' + (data[pos + 2]) + ',' + (data[pos + 3]) + ')'
            }
            pixels.push(pixel);
          }
        }
      }
      console.log(pixels)
    }
  </script>
</body>
</html>